<template>
  <div class="box">
    <div class="title">{{ title }}</div>
    <img src="@/assets/images/close1.png" alt="" class="close" />
    <div class="top">
      <div class="left">
        <div class="left-top">
          <div class="state-box">
            <img src="@/assets/images/pending-deal.png" alt="" />
            <div class="state">
              <span>待处理</span>
              <span>{{ data?.pending }}</span>
            </div>
          </div>
          <div class="state-box">
            <img src="@/assets/images/timeout.png" alt="" />
            <div class="state">
              <span>已超时</span>
              <span class="timeout-txt">{{ data?.timeout }}</span>
            </div>
          </div>
        </div>
        <div class="left-bottom">
          <div class="left-bottom-title"><span>挂牌督办</span></div>
          <table class="styled-table">
            <thead>
              <tr>
                <th>名称</th>
                <th>数量</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in data?.tableData" :key="index">
                <td>{{ item.name }}</td>
                <td>{{ item.num }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="right">
        <!-- 雷达图 -->
        <Radar :chartData="chartData"></Radar>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-title">智慧小池安全自驱评估：</div>
      <div class="advice" :title="data?.evaluateAdvice">
        <div>
          {{ data?.evaluateAdvice }}
        </div>
        <img src="@/assets/images/robot.png" alt="" />
      </div>
      <div class="evaluate-box">
        <div class="evaluate-data">
          <span>施工安全管控</span>
          <span class="data manage-data"> {{ data?.safeManage }} </span>
        </div>
        <div class="evaluate-data">
          <span>危险源辨识</span>
          <span class="data">{{ data?.dangerSource }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Radar from '@/components/echarts/radar.vue'
defineProps({
  title: {
    type: String,
    default: '外西沟工务工区',
  },
  data: {
    type: Object,
    default: () => {
      return {
        pending: 8,
        timeout: 1,
        tableData: [
          {
            name: '国能',
            num: 0,
          },
          {
            name: '新朔',
            num: 0,
          },
          {
            name: '分公司',
            num: 1,
          },
        ],
        evaluateAdvice:
          '外西沟工务工区本年度累计处理隐患197处，作业管控维度隐患数量呈上升趋势，建议加强对作业过程中人员作业规范行为培训及管控',
        safeManage: 24,
        dangerSource: 83,
      }
    },
  },
  chartData: {
    type: Object,
    default: () => {
      return {
        indicator: [
          { name: '隐患排查治理' }, //官网用text，新版用name
          { name: '消防安全管控' },
          { name: '物资管控' },
          { name: '设备设施健康' },
          { name: '违章/事故' },
          { name: '高危作业管控' },
          { name: '人员不安全行为' },
          { name: '标准作业管控' },
          { name: '隐患追踪管控' },
        ],
        dataSeries: [
          {
            name: '数据项',
            value: [80, 60, 70, 50, 90, 40, 75, 65, 85],
          },
          {
            name: '数据项',
            value: [90, 60, 70, 50, 90, 40, 75, 65, 85],
          },
        ],
      }
    },
  },
})
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  width: 1188px;
  height: 838px;
  padding-top: 6px;
  background: url('@/assets/images/dialog-bcg.png') no-repeat;
  margin: 10px auto;
  .title {
    height: 41px;
    line-height: 41px;
    margin-left: 36px;
    font-style: italic;
    font-weight: 700;
    font-size: 28px;
    color: #ffffff;
  }
  .close {
    position: absolute;
    top: 16px;
    right: 20px;
  }
  .top {
    display: flex;
    align-items: center;
    margin: 0 29px 0 29px;
    .left {
      width: 502px;
      margin-right: 60px;
      .left-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .state-box {
          display: flex;
          align-items: center;
          .state {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-left: 20px;
            > span:nth-child(1) {
              height: 38px;
              line-height: 38px;
              font-weight: 400;
              font-size: 26px;
              color: #ffffff;
            }
            > span:nth-child(2) {
              height: 65px;
              font-weight: 500;
              font-size: 54px;
              line-height: 76px;
              // 文字渐变
              background-image: linear-gradient(to bottom, #ffffff 46%, #6cb8ff 100%);
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;
              color: transparent;
            }
            .timeout-txt {
              background-image: linear-gradient(to bottom, #ffffff 0%, #ff5d5d 100%) !important;
            }
          }
        }
      }
      .left-bottom {
        margin-top: 48px;
        .left-bottom-title {
          position: relative;
          height: 30px;
          background: url('@/assets/images/dash.png') no-repeat;
          > span {
            position: absolute;
            top: -21px;
            left: 174px;
            height: 41px;
            font-weight: 700;
            font-size: 28px;
            color: #5bf5fe;
            line-height: 41px;
          }
        }
        .styled-table {
          width: 100%;
          border-collapse: collapse;
        }

        .styled-table,
        .styled-table td,
        .styled-table th {
          border: none;
        }
        .styled-table > tbody > tr,
        .styled-table > thead {
          display: table;
          width: 100%;
          table-layout: fixed; /* 重要  表格固定算法 */
        }
        thead {
          width: 100%;
          padding-right: 0.5rem; //这个地方是留给右边的滚动条，防止单元格对不齐
          font-size: 20px;
          font-weight: bold;
          tr {
            width: 100%;
            text-align: center;
            color: #000;
            // display: table; //表格布局
            // table-layout: fixed; //固定表头
          }
          th {
            // width: 50%;
            font-weight: 700;
            font-size: 20px;
            color: #ffffff;
            height: 52px;
            background: rgba(2, 133, 255, 0.3);
            box-shadow: inset 0px -1px 0px 0px #00f1ff;
            border-radius: 0px 0px 0px 0px;
            &:nth-child(1) {
              //每一行的最后一个td/th不设置宽度，前面的td设置宽度来让表格头部和内容对齐
              width: 70%;
            }
          }
        }

        .styled-table tbody {
          overflow: hidden;
          display: block;
          overflow: hidden;
          overflow-y: auto;
          width: 100%;
          height: 132px;
          &::-webkit-scrollbar {
            width: 4px;
            opacity: 0.5;
          }
          &::-webkit-scrollbar-track {
            background-color: rgb(206, 229, 250);
          }
          &::-webkit-scrollbar-thumb {
            opacity: 0.5;
            border-radius: 0px;
            background-color: rgba(2, 133, 255, 0.3);
          }
          tr {
            width: 100%;
            height: 44px;
            font-weight: 400;
            font-size: 20px;
            color: #d3dfe8;
            text-align: center;
            &:nth-child(even) {
              background-color: rgba(18, 133, 255, 0.08);
            }
          }
          td:nth-child(1) {
            width: 70%;
          }
        }
      }
    }
    .right {
      display: flex; /* 添加此行以启用Flexbox */
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      flex: 1;
      height: 420px;
      text-align: center;
      background: url('@/assets/images/radar.png') no-repeat 46px center / 83% 100%;
    }
  }
  .bottom {
    margin: 0 29px 29px 29px;
    .bottom-title {
      height: 38px;
      font-weight: 400;
      font-size: 26px;
      color: #ffffff;
      line-height: 38px;
      margin-bottom: 10px;
    }
    .advice {
      position: relative;
      width: 100%;
      height: 114px;
      background: rgba(40, 66, 112, 0.4);
      box-shadow: inset 0px 0px 30px 0px rgba(84, 127, 188, 0.47);
      border-radius: 0px 0px 0px 0px;
      border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(85.26864811778069, 153.24062436819077, 209.4642922282219, 0.6800000071525574),
          rgba(214.3805292248726, 235.4127198457718, 255, 1),
          rgba(101.09197184443474, 160.34941971302032, 215.5357128381729, 0.6299999952316284)
        )
        1 1;
      > div {
        font-weight: 400;
        font-size: 24px;
        color: #ffffff;
        line-height: 35px;
        margin: 22px 34px;
        // 多行省略
        display: -webkit-box;
        display: box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      > img {
        position: absolute;
        top: -83px;
        right: -25px;
      }
    }
    .evaluate-box {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      height: 185px;
      margin-top: 10px;
      background: url('@/assets/images/evaluate-box.png') no-repeat;
      .evaluate-data {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 400px;
        height: 112px;
        background: url('@/assets/images/evaluate-data-bcg.png') no-repeat;
        font-size: 26px;
        color: #ffffff;
        .data {
          font-weight: 700;
          font-size: 74px;
          line-height: 102px;
          text-align: center;
          font-style: normal;
          text-transform: none;
          background: linear-gradient(to bottom, #ffffff 46%, #05ffff 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
        }
        .data.manage-data {
          background: linear-gradient(to bottom, #ffffff 46%, #0285ff 100%);
          -webkit-background-clip: text;
          background-clip: text;
        }
      }
    }
  }
}
</style>
